import React from 'react'
import DynamicTabs from '@site/src/components/download/DynamicTabs'
import GetPolyOSMobile from '@site/src/components/download/GetPolyOSMobile'
import ForthcomingBanner from '@site/src/components/ForthcomingBanner'
import { ConfigProvider } from 'antd'
import Translate from '@docusaurus/Translate'

const DownLoadTabs: React.FC = () => {
  const handleTabChange = (key: string) => {
    console.log('Tab changed:', key)
  }

  const tabs = [
    {
      key: '1',
      title: (
        <Translate
          id="component.download.DownloadTabs.tab.mobile.title"
          description="the title of PolyOS Mobile tab on Get PolyOS page">
          PolyOS Mobile
        </Translate>
      ),
      component: <GetPolyOSMobile />,
    },
    {
      key: '2',
      title: (
        <Translate
          id="component.download.DownloadTabs.tab.aiot.title"
          description="the title of PolyOS Mobile tab on Get PolyOS page">
          PolyOS AIoT
        </Translate>
      ),
      component: <ForthcomingBanner />,
    },
  ]

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#414bb2',
        },
      }}>
      <div>
        <DynamicTabs tabs={tabs} onTabChange={handleTabChange} />
      </div>
    </ConfigProvider>
  )
}

export default DownLoadTabs
